<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../css/purchaselist.css" />
</head>

<body class="fixed-left">
	<div class="enlarged forced" id="wrapper">
		<div class="content-page crm" style="margin: 0;padding: 0">
			<div class="content" style="margin: 0;padding: 0">
				<div class="container-fluid">
					<div class="row">

						<div id="idid" class="col-sm-12">
						<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
							<!----------------筛选、查询input代码开始-------------------->
							<div id="search">

								<div style="height: 50px; width: 500px; margin: 0 auto;"
									id="app">
									<el-input placeholder="客戶名称" v-model="ruleForm.input"
										class="input-with-select"> <el-select
										style="width:120px;" v-model="ruleForm.selects" slot="prepend"
										clearable placeholder="全部数据"> 
										<el-option label="新采购" value="3185"></el-option>
										<el-option label="生成入库单" value="3186"></el-option>
										<el-option label="未入库" value="3187"></el-option>
										<el-option label="入库完成" value="3188"></el-option>
										
										</el-select> <el-button slot="append"
										icon="el-icon-search" @click="submitForm('ruleForm')"></el-button>

									</el-input>
								</div>
							</div>
							<!----------------列表-------------------->
							<div id="qlist" style="z-index: 0">
									<div class="row m-t-15 f-s-12" style="height: 35px;">
										<div class="col-sm-6">
											<span set-lan="html:采购单">采购明细</span>
										</div>
									</div>

									<div class="tab-content p-0">
										<div class="bootstrap-table m-t-10">
											<div class="fixed-table-container overflow-x-auto">
												<table class="table table-bordered table-hover table-z" id="qlist_table">
													<thead>
														<tr>

															<th class="th-inner">
																<p>
																	<a class="na" href="JavaScript:qlist_argv_orderf='id'; qlist_argv_orderv=0;qlist_load();" set-lan="html:ID">ID</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="left">
																	<a class="na" href="JavaScript:qlist_argv_orderf='owner'; qlist_argv_orderv=0;qlist_load();" set-lan="html:经手人">经手人</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="left">
																	<a class="na" href="JavaScript:qlist_argv_orderf='pu_id'; qlist_argv_orderv=0;qlist_load();" set-lan="html:采购单">采购单</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="left" set-lan="html:供应商(客户)">供应商(客户)</p>
															</th>
															<th class="th-inner"  style="width:350px">
																<p align="left">
																	<a class="na">产品名称</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="right">
																	<a class="na" href="JavaScript:qlist_argv_orderf='price'; qlist_argv_orderv=0;qlist_load();" set-lan="html:单价">单价</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="right">
																	<a class="na" href="JavaScript:qlist_argv_orderf='num'; qlist_argv_orderv=0;qlist_load();" set-lan="html:数量">数量</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="right">
																	<a class="na" href="JavaScript:qlist_argv_orderf='backnum'; qlist_argv_orderv=0;qlist_load();" set-lan="html:已入库">已入库</a>
																</p>
															</th>
															<th class="th-inner">
																<p align="right">
																	<a class="na" href="JavaScript:qlist_argv_orderf='money'; qlist_argv_orderv=0;qlist_load();" set-lan="html:金额">金额</a>
																</p>
															</th>
														</tr>
													</thead>
													<tbody class="bg-white">

														<tr v-for="(list,i) in tableData" :v-model="tableData">
															<td>
																<p>{{list.purid}}</p>
															</td>
															<td>
																<p align="left">
																	<a id="qlist_F262" onclick=" reportMove(this) ;" href='JavaScript:qlist_click_todetail("262","675060");'><i class="fa fa-arrow-circle-right text-blue m-r-5"></i>{{list.use_name}}</a>
																</p>
															</td>
															<td>
																<p align="left"><span style="font-weight:normal;color:#9e9e9e">〖</span>{{list.theme}}
																	<a href="javascript:vopen('/lib/purchase/detail.xt?id=40','purchase40',999,600);"><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a><span style="font-weight:normal;color:#9e9e9e">〗</span></p>
															</td>
															<td>
																<p align="left"><span style="font-weight:normal;color:#9e9e9e">〖</span>{{list.supname}}
																	<a href="javascript:vopen('/xcrm/customer/customer/detail.xt?id=136','customer136',999,600);"><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a><span style="font-weight:normal;color:#9e9e9e">〗</span></p>
															</td>
															<td>
																<p align="left">{{list.goo_name}}[{{list.gunit}}]
																	<a href="javascript:vopen('/xcrm/market/product/detail.xt?id=95','product95',999,600);"><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a>
																</p>
															</td>
															<td>
																<p align="right"><span style="white-space:nowrap"><span style="font-size:9pt;font-weight:normal;">￥</span>{{list.goo_price}}</span>
																</p>
															</td>
															<td>
																<p align="right">{{list.purnum}}</p>
															</td>
															<td>
																<p align="right">{{list.yesnum}}</p>
															</td>
															<td>
																<p align="right"><span style="white-space:nowrap"><span style="font-size:9pt;font-weight:normal;">￥</span>{{list.purprice}}</span>
																</p>
															</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
										<div class="row m-t-10">
										<div class="col-sm-3">
											<input name="sel_type" type="hidden" value="0"> <a
												title="删除"><button
													class="btn btn-white btn-custom waves-effect waves-light"
													onclick="if (confirm('确认删除选中数据及其视图下关联数据吗？')) { $('form[name=formedit_qlist]').find('input[name=sel_type]').val('0').end().submit();};return  false;"
													data-original-title="删除" data-toggle="tooltip"
													data-placement="bottom">
													<i class="el-icon-delete"></i>
												</button></a> &nbsp; <a title="批量编辑"><button
													class="btn btn-white btn-custom waves-effect">
													<i class="el-icon-edit"></i>
												</button></a>
										</div>
										<div class="col-sm-7">
									<el-pagination @size-change="handleSizeChange"
										@current-change="handleCurrentChange"
										:current-page="ruleForm.currentPage"
										:page-sizes="[10, 20, 30, 40]" :page-size="ruleForm.pagesize"
										layout="total, prev, pager, next, jumper"
										:total="ruleForm.totalCount"> </el-pagination>
								</div>
										<div class="col-sm-2 text-right">
											<!-- BEGIN qqhide -->
											<a title="打印列表" class="btn btn-white btn-custom waves-light"
												href="/system/runmod_print.xt?where=&amp;bwhere=&amp;page=&amp;orderf=&amp;orderv=&amp;pn=&amp;customer_phone_show=0&amp;sid=95&amp;ssn=eqtbhnjoofkukakh9srptfb8c5&amp;ccn=d002&amp;cr=3f45cc49f1d751bb552284054948516d&amp;ma=caec64c353ff1fff4813f3df05349b00&amp;scname=memday&amp;comname=qlist&amp;modcr=d0916b6105e2b6463742e2befb050fdc&amp;customer_phone_show=0&amp;cv=,search,qlist,&amp;qlist_print=1"
												target="_blank" data-original-title="打印列表"
												data-toggle="tooltip" data-placement="bottom"> <i
												class="el-icon-printer"></i></a> <a
												title="导出Excel权限"
												class="btn btn-white btn-custom  waves-effect waves-light"
												href="/setup/setup.xt?func=s_table&amp;dt=memday"
												target="_blank" data-toggle="tooltip"
												data-placement="bottom"><i
												class="el-icon-setting"></i></a>&nbsp;
											<a
												class="btn btn-white easyui-linkbutton" onclick="downloadfile();"
												title="导出Excel格式数据">
												<i class="el-icon-document"></i>
											</a>
											<!-- END qqhide -->
										</div>
									</div>
									</div>
							</div>


							<!----------------统计-------------------->
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
				var vm = new Vue({
					el: "#idid",
					data() {
						return {
							texts: "",
							centerDialogVisible: false,
							centerDialogVisible4:false,
							dialogVisible:false,
							dialogVisible2:false,
							FrameSrc:"",
							//表格当前页数据
			                tableData: [],
			                
							ruleForm: {
								//搜索框
								input: '',
								 //默认每页数据量
				                pagesize: 10,
				              //当前页码
				                currentPage: 1,
				                //默认数据总数
				                totalCount: '',
						        },
						        schno:''
						}
					},
					methods: {
						//从服务器读取数据
		                loadData: function(){  
		                	var iosnn=this;
		                	//post提交数据
							axios.post("/detailList2",
								//参数转换
								Qs.stringify(this.ruleForm, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								iosnn.tableData = v.data.list;
								iosnn.ruleForm.totalCount = v.data.total;
								 console.info(v.data); 
							}).catch(function(e) {
								alert("出错了"+e);
							});
		                },
		                handleSizeChange(val) {
		                	this.ruleForm.pagesize = val;
					        console.log( this.ruleForm.pagesize+'条');
					        this.ruleFormloadData();
					      },
					      handleCurrentChange(val) {
					    	this.ruleForm.currentPage = val;
					        console.log(this.ruleForm.currentPage+'当前');
					        this.loadData();
					       
					      },

						submitForm(formName) {
							//验证方法
							this.$refs[formName].validate((valid) => {
								if(valid) {
									this.loadData();
								} else {
									console.log('error submit!!');
									return false;
								}
							});
						}
						 
					},
					mounted() {
						var iosnn=this;
						//post提交数据
						axios.post("/detailList",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})		
						).then(function(v) {
							iosnn.tableData = v.data.list;
							iosnn.ruleForm.totalCount = v.data.total;
							//iosnn.tableData = v.data;
							console.info(iosnn.tableData);
						}).catch(function(e) {
							alert("出错了"+e);
						});
					}
					
				});
			</script>
	
</body>

</html>